<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>图书数据</title>
</head>
<body>
<div class="layui-col-sm12 layui-col-md6">
    <div class="layui-card" style="background-color: #FAFAFA">
        <div class="layui-card-header">图书类型</div>
        <div class="layui-card-body" style="min-height: 300px;">
            <div id="main"  style="width: 600px;height:400px;"></div>
        </div>
    </div>
</div>
 <script src=" https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
 <script type="text/javascript">
     // 基于准备好的dom，初始化echarts实例
     var myChart = echarts.init(document.getElementById('main'));
     // 指定图表的配置项和数据
     myChart.setOption({
         title: {
             text: '图书借阅量量'
         },
         tooltip: {},
         legend: {
             data: ['借阅量']
         },
         xAxis: {  //底部导航栏
             data: ["javaWeb", "数据库", "高数", "数据结构", "计算机导论", "MySQL", "C语言",]
         },
         yAxis: {},
         series: [{
             name: '借阅量',
             type: 'bar',
             itemStyle: {
                 normal: {
                     color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                         offset: 0,
                         color: "#f34006" // 0% 处的颜色
                     }, {
                         offset: 0.6,
                         color: "#fa9008" // 60% 处的颜色
                     }, {
                         offset: 1,
                         color: "#febd0b" // 100% 处的颜色
                     }], false)
                 }
             },
             data: ["100", "130", "30", "40", "120", "36", "80"],
         }]
     });
         // 在数据为动态加载之前建筑loading动画
         myChart.showLoading();

     // 对数据进行重写,变成动态数据

     let maxScores=[];
     let minScores=[];
     let sNames=[];

     $.ajax({
         type:"post",
         async:true,
         url:"",
         data:{},
         dataType:"json",
         // 回调函数
         success:function (result) {
             if(result != null && result.length > 0) {
                 for(let i = 0; i <result.length; i ++) {
                     maxScores.push(result[i].maxscore);
                     minScores.push(result[i].minscore);
                     sNames.push(result[i].sname);
                 }

                 // 隐藏加载动画
                 myChart.hideLoading();

                 // 重新载入 Option
                 myChart.setOption({
                     xAxis:{
                         data:sNames    // 重写 x 轴
                     },
                     series:[
                         {
                             name:'最高分',
                             data:maxScores
                         },
                         {
                             name:'最低分',
                             data:minScores
                         }
                     ]
                 })
             }
         }

     });
     // 3、载入 Echarts 图标
     myChart.setOption(option);
 </script>
</body>
</html>
